<template>
  <div class="structure-tree">
    <div class="side-label">工艺布局结构</div>
    <div class="structure-side-tree">
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        empty-text="暂无数据"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface INodeGroup {
  label: string
  children: INodeGroup[]
}

const props = withDefaults(defineProps<{ data: Record<string, any>[] }>(), {
  data: () => []
})

const handleNodeClick = () => {}

const parseNodes = (nodes: Record<string, any>[]): INodeGroup[] => {
  return nodes.map((node) => {
    const children = node.getChildren()
    return {
      label: node.data.label,
      children: children?.length ? parseNodes(children) : []
    }
  })
}

const data = computed(() => {
  return parseNodes(props.data)
})

const defaultProps = {
  children: 'children',
  label: 'label'
}
</script>

<style lang="scss" scoped>
.structure-tree {
  height: 100%;
  display: flex;
  flex-direction: column;
  .structure-side-tree {
    flex: 1;
    overflow: scroll;
  }
  .side-label {
    padding-bottom: 16px;
  }
}
</style>
